<template>
	<div class="kaochangguanli flex">
    <left></left>
    <div style="width: calc(100vw - 280px); height: calc(100vh - 40px); overflow: auto; padding: 20px;">

      <div style="margin-bottom: 20px;">新增栏目</div>

      <el-table :data="tableData"  border  style="width: 100%">
          <el-table-column prop="date" label="栏目名称"></el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <el-button @click="bianji(scope.row)" type="text">编辑</el-button>
            </template>
          </el-table-column>
      </el-table>
      <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total,jumper" :current-page="search.page" @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>

    </div>
    <el-dialog  title="栏目管理"  :visible.sync="log"  width="700px" :close-on-click-modal="false" :close-on-press-escape="false">

      <div style="padding: 5px 10px;" class="flexc">
        <div style="width: 180px; text-align: right; margin-right: 30px;">添加栏目：</div>
        <el-input v-model="all.name" style="width: 250px; " placeholder="请输入栏目名称"></el-input>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" round @click="fabu">提交申请</el-button>
      </div>

    </el-dialog>


	</div>
</template>

<script>
  import left from '../left.vue'
	export default {
		name: 'kaochangguanli',
    components:{
      left
    },
		data() {
			return {
        tableData:[],
        search:{
          page:1,
          page_size:20,
        },
        total:0,
        log:false,
        all:{
          id:"",
          name:""
        }
			}
		},
		created() {
      this.getlist()

		},
		mounted() {

		},
		methods: {
      add:function(){
        this.all ={
          id:"",
          name:""
        }
        this.log = true
      },
      bianji:function(item){
        this.all ={
          id:item.id,
          name:item.name
        }
        this.log = true
      },
      fabu:function(){

      },
      getlist:function(){
        // axios.get('/admin/page/list').then((response)=>{
        // 	if (response.data.msg.code == 0) {
        // 		this.list = response.data.data
        //     // this.total = response.data.data.total
        // 	} else {
        // 		this.$message.error(response.data.msg.info);
        // 	}
        // })
      },
      fanye:function(val){
        this.search.page = val
        this.getlist()
      },
		}
	}
</script>


<style scoped >

</style>
